<template>
  <!-- asset-划转页面 -->
  <div class="component-page">
    <h1 class="user-title">划转</h1>
    <el-form
      label-position="top"
      label-width="80px"
      :model="transferForm"
      :rules="formRelus"
      ref="transferform"
      class="transfer-form"
    >
      <p class="label-text">币种选择</p>
      <el-select
        v-model="transferForm.coin"
        placeholder="请选择"
        class="coin-select"
        @change="coinChange(transferForm.coin)"
      >
        <el-option
          v-for="item in otcCoinList"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <p class="label-text">划转方向</p>
      <div class="choise-box">
        <el-form-item class="choise-item">
          <el-col :span="11">
            <el-select v-model="transferForm.fronAccount" placeholder="请选择" class="choise-select">
              <el-option
                v-for="item in fromList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <span class="choise-text">转至</span>
        <el-form-item class="choise-item">
          <el-col :span="11">
            <el-select v-model="transferForm.toAccount" placeholder="请选择" class="choise-select">
              <el-option
                v-for="item in toList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.value==transferForm.fronAccount"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </div>
      <p class="amount-label label-text">
        <span>划转数量</span>
        <span>可用：123 CNY</span>
      </p>
      <el-form-item prop="amount">
        <el-input v-model="transferForm.amount" @input.native="numInput($event,8)">
          <span slot="suffix" class="all-text" @click="allClick()">全部划转</span>
        </el-input>
      </el-form-item>
    </el-form>
    <button class="btn" @click="submitClick()">确定</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      otcCoinList: [
        {
          name: "BTC",
          id: 1
        },
        {
          name: "ETH",
          id: 2
        }
      ],
      transferForm: {
        coin: "",
        fronAccount: "法币账户",
        toAccount: "币币账户",
        amount: 0
      },
      fromList: [
        { label: "法币账户", value: "otc" },
        { label: "币币账户", value: "cec" }
      ],
      toList: [
        { label: "法币账户", value: "otc" },
        { label: "币币账户", value: "cec" }
      ],
      transferrules: {},
      asset: {
        OtcCoin: 0,
        CecCoin: 0
      },
      // 表单验证规则
      formRelus: {
        amount: [
          { required: true, message: "表单不能为空", trigger: "blur" },
          {
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    /*
     *法币交易支持币种的加载,用于划转接口的对接
     */
    reqOtcSuppertCoin() {},
    /*
     *币种的切换
     */
    coinChange(val) {
      console.log("当前切换的币种", val);
      let coinid = val;
      this.reqAsset(coinid);
    },
    /*
     *查询可用的划转余额
     */
    reqAsset(coinid) {
      this.asset = {
        OtcCoin: 100,
        CecCoin: 200
      };
    },
    /*
     *全部划转按钮的点击
     */
    allClick() {},
    /*
     *划转按钮的提交
     */
    submitClick() {
      this.$message.success('划转操作')
    },
    // 价格处理
    numInput(e, num) {
      if (e.target.value) {
        this.$nextTick(() => {
          let point = e.target.value;
          if (point.indexOf(".") != -1) {
            point = point.split(".");
            if (point[1].length >= num) {
              this.transferForm.amount =
                (point[0] + "." + point[1].substring(0, num)) * 1;
            }
          }
        });
      }
    }
  },

  computed: {},

  created() {
    this.reqOtcSuppertCoin();
  },

  mounted() {}
};
</script>
<style scoped>
.transfer-form {
  padding: 29px 0 0 19px;
  width: 952px;
}
.label-text {
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  height: 25px;
}
.coin-select {
  width: 933px;
  margin-bottom: 20px;
}
.choise-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 933px;
}
.choise-select {
  width: 430px;
}
.choise-text {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  position: relative;
  top: -10px;
}
.amount-label {
  display: flex;
  justify-content: space-between;
  width: 933px;
}
.all-text {
  font-size: 12px;
  color: rgba(49, 192, 206, 1);
  line-height: 40px;
  cursor: pointer;
  padding-right: 5px;
}

.btn {
  width: 150px;
  height: 46px;
  background-color: #31c0ce;
  font-size: 18px;
  color: rgba(254, 254, 254, 1);
  float: right;
  margin-top: 20px;
  border: none;
  border-radius: 4px;
  margin-right: 9px;
}
.btn:hover {
  background: #5acdd8;
  background-color: rgb(90, 205, 216);
  border-color: #5acdd8;
  color: #fff;
  cursor: pointer;
}
</style>
